<!DOCTYPE html>
<head>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="src/js/qrcode.min.js"></script>
    <script type="text/javascript" src="src/js/qrcode.js"></script>
    <title>主页</title>
</head>
<style>
    body {
        text-align: center;
        background-color: #ffffff;
    }
    img.smaller {
        width: 192px;
        height: 108px;
        max-width: 250px;
        animation: flipInX 4s;
        -webkit-animation: flipInX 4s
    }
    .logo {
        font-size: 2em;
        white-space: normal;
        word-wrap: break-word;
        text-decoration: none;
        color: #232323
    }
    #search_input {
        width: 90%;
        height: 40px;
        background-color: transparent;
        border: none;
        outline: 0;
        font-size: 18px;
        color: #000000;
        padding: 0 20px;
        border-radius: 50px
    }
    .search_part {
        margin-bottom: 30px;
        margin-top: 10px;
    }
    span {
        display: block;
        overflow: hidden;
        padding-left: 5px;
        vertical-align: middle;
    }
    .search_bar {
        box-shadow: 0 0 18px rgba(70,70,40,.255);
        -webkit-animation: fadeIn 2.5s;
        animation: fadeIn 2.5s;
        background-color: rgba(255,255,255,.100);
        border-radius: 50px;
        display: table;
        vertical-align: middle;
        width: 80%;
        height: 40px;
        max-width: 400px;
        margin: 10px auto;
    }
    #search_submit {
        outline: 0;
        height: 40px;
        float: right;
        color: #000;
        font-size: 16px;
        font-weight: 700;
        border: none;
        background-color: transparent;
        padding: 0 13px 0 13px
    }
    #content {
        width: 100%;
        text-align: center;
        padding-top: -15px;
        padding-bottom: 10px;
    }
    .box {
        -webkit-animation: fadeInDown 1s;
        animation: fadeInDown 1s;
        position: relative;
        display: inline-block;
        width: 75px;
        border: 0;
    }
    .box a {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .url {
        color: #232323;
        height: 1.5em;
        line-height: 1.5em;
        width: 72px;
        font-size: 0.75em;
        white-space: nowrap;
        overflow: hidden;
        margin: auto;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        padding-top: 1px;
        padding-bottom: 20px;
    }
    .icon {
        width: 3em;
        height: 3em;
        max-width: 72px;
    }
    
    /*链接样式*/
    a:link {color: black; text-decoration:none;}
    a:active:{color: red;}
    a:visited {color:black;text-decoration:none;}
    
    /*悬浮窗外部同层级*/
    .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 125%;
            background-color: black;
            z-index:1;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=88);
        }
    /*悬浮窗样式*/
    .white_content {
            display: none;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left:50%;
            width: auto;
            height: auto;
            padding: 10px;
            border: 4px solid orange;
            background-color: white;
            z-index:2;
            overflow: auto;            
        }
    .fx{
        color: #ff190c;
    }
</style>

<body>
<div id="content">
    <br />
    <div class="search_part">
        <a class="logo" href="https://www.baidu.com">
            <img class="smaller" src="src/img/baidu.gif"></img>
        </a>
        <br />
        <form onsubmit="return search()" class="search_bar">
            <input type="submit" id="search_submit" value="搜索" >
            <span><input class="search" type="text" value="" autocomplete="off" id="search_input" ></span>
        </form>
    </div>
    <br />    
    <div class="box">
        <a href="https://www.weibo.com"></a>
        <p><img class="icon" src="src/img/weibo.jpg" ></p>
        <p class="url">微博</p>
    </div>
    
    <div class="box">
        <a href="https://www.bilibili.com/"></a>
        <p><img class="icon" src="src/img/bilibili.jpg" ></p>
        <p class="url">哔哩哔哩</p>
    </div>
    <div class="box">
        <a href="https://pan.baidu.com/"></a>
        <p><img class="icon" src="src/img/baiduyun.jpg" ></p>
        <p class="url">百度云</p>
    </div>
    <div class="box">
        <a href="https://fanyi.baidu.com/"></a>
        <p><img class="icon" src="src/img/fanyi.jpg" ></p>
        <p class="url">百度翻译</p>
    </div>
    <div class="box">
        <a href="https://www.google.com"></a>
        <p><img class="icon" src="src/img/google.jpg" ></p>
        <p class="url">Google</p>
    </div>
    <div class="box">
        <a href="https://m.youtube.com"></a>
        <p><img class="icon" src="src/img/youtube.jpg" ></p>
        <p class="url">Youtube</p>
    </div>
    <div class="box">
        <a href="https://github.com/"></a>
        <p><img class="icon" src="src/img/GitHub.jpg" ></p>
        <p class="url">GitHub</p>
    </div>
	<div class="box">
		<a href="https://gitee.com/sunwul"></a>
		<p><img class="icon" src="src/img/Gitee.jpg" ></p>
        <p class="url">Gitee</p>
	</div>
	<div class="box">
		<a href="https://greasyfork.org/zh-CN"></a>
		<p><img class="icon" src="src/img/greasyfork.jpg" ></p>
        <p class="url">Greasy<br>Fork</p>
	</div>
	<div class="box">
		<a href="https://www.52pojie.cn/"></a>
		<p><img class="icon" src="src/img/wuaipojie.jpg" ></p>
        <p class="url">吾爱破解</p>
	</div>
	
</div>
<a class="fx" onclick = "openDialog()"><strong>点击分享主页</strong></a>
<!--弹框显示-->
<div id="Popup" class="white_content">
    <!--显示内容-->
    <div id="qrcode"></div>    
    <a class="fx" onclick = "closeDialog()"><strong>关闭</strong></a>
    <!--时间-->
    <div id="SystemTimeT"></div>
    <div id="SystemTimeD"></div>
</div>
<!--悬浮窗外部层级-->
<div id="fade" class="black_overlay"></div>

<script type="text/javascript">
    /*搜索按钮关联百度*/
    function search(){
        if(document.getElementById("search_input").value != ""){
            window.location.href = "https://www.baidu.com/s?word=" + document.getElementById("search_input").value;
            document.getElementById("search_input").value = "";
        }
        return false;
    }
    /*主页鼠标悬停右键失效*/
    document.oncontextmenu=new Function("event.returnValue=false");
    document.onselectstart=new Function("event.returnValue=false");
    /*悬浮窗时间*/
    setInterval("document.getElementById('SystemTimeD').innerHTML = new Date().toLocaleDateString();", 1000);
    setInterval("document.getElementById('SystemTimeT').innerHTML = new Date().toLocaleTimeString();", 1000);
    /*页尾时间*/
    setInterval("document.getElementById('SystemTimeFooter').innerHTML = new Date().toLocaleString();", 1000);    
    /*悬浮窗*/
    function openDialog(){
        document.getElementById('Popup').style.display='block';
        document.getElementById('fade').style.display='block';
        /*生成二维码*/
        var qrcode = new QRCode("qrcode");
        qrcode.makeCode("https://sunwul.github.io/Home/");

    }
    function closeDialog(){
        document.getElementById('Popup').style.display='none';
        document.getElementById('fade').style.display='none';
        /*清空二维码*/
        document.getElementById('qrcode').innerHTML=null;
    }
</script>
<footer>
    <a href="mailto:swl446857@gmail.com">mail-@:swl446857@gmail.com</a>
    <!--时间-->
    <div id="SystemTimeFooter"></div>
</footer>
</body>
</html>
